import * as React from 'react'
import {
  Button, Icon, Row, Col,
  Card, Badge, Anim, Progress,
  Quote, Divider, Timeline,
  Slider, FloatMenu
} from '../components'

import './app.less'

const QuoteFields = Quote.Fields
const TimelineItem = Timeline.Item

export interface AppProps {}
export interface AppState {}

export default class App extends React.Component<AppProps, AppState> {
  constructor(props: AppProps) {
    super(props)
    this.state = {
    }
  }

  contentRef = React.createRef();

  render() {
    return <div>
      <h1>Layui-For-React1</h1>
      <FloatMenu menuData={[
        {
          iconColor: '#38B7F6',
          iconType: 'export',
          menuKey: 'item-1'
        },
        {
          iconColor: '#38B7F6',
          iconType: 'print',
          menuKey: 'item-1'
        }
      ]} handleClickEvent={() => console.log(1)}/>
      <div style={{ minHeight: 100, padding: 20 }}>
        <Anim type='up|scale'>
          <Slider defaultValue={20} />
        </Anim>
      </div>
      <div style={{ minHeight: 100, padding: 20 }}>
        <Timeline data={[
          {
            title: '8月18日',
            content: (
              <p>
                layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。<br />
                不枉近百个日日夜夜与之为伴。因小而大，因弱而强。<br />
                无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔
              </p>
            )
          }
        ]}>
          <TimelineItem title="8月19日">
            <p>
              layui 2.1 的一切准备工作似乎都已到位。发布之弦，一触即发。<br />
                不枉近百个日日夜夜与之为伴。因小而大，因弱而强。<br />
                无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔
              </p>
          </TimelineItem>
        </Timeline>
      </div>
      <div style={{ minHeight: 100, padding: 20 }}>
        <Divider text="verticalleft" orientation="left" />
        <Divider text="verticalcenter" orientation="center" />
        <Divider text="vertical" orientation="right" />
        <Divider />
      </div>
      <div style={{ height: 100 }}>
        Text
        <Divider type="vertical" />
        <a href="#">Link</a>
        <Divider type="vertical" />
        <a href="#">Link</a>
      </div>
      <div style={{ height: 100 }}>
        <QuoteFields title={"sssss"}>
          asdasdasda
        </QuoteFields>
      </div>
      <div style={{ height: 100 }}>
        <Quote>
          adadad
        </Quote>
      </div>
      <Progress percent={10} text={"10%"} />
      <Anim type="up|scale">
        <Badge color="cyan" body={"adada"} />
      </Anim>
      <Badge color="blue" type="dot" />
      <h1>Layui-For-React</h1>
      <div className="layui-row">
        <div className="layui-col-md6">
          <div className="grid-demo grid-demo-bg1">50%</div>
        </div>
        <div className="layui-col-md6">
          <div className="grid-demo">50%</div>
        </div>
      </div>
      <Button type="danger">Button</Button>
      <Icon size="sm" type="light"></Icon>
      <div>
        <Row gutter={0}>
          <Col xs={3} sm={3} md={6}>Col</Col>
          <Col xs={3} sm={3} md={6}>Col</Col>
          <Col xs={3} sm={3} md={6}>Col</Col>
          <Col xs={3} sm={3} md={6}>Col</Col>
        </Row>
      </div>
      <div
        style={{ padding: 10, background: 'pink' }}
      >
        <Card
          title={"面板标题"}
        >
          adad
      </Card>
      </div>
      <div style={{ padding: 10 }}>
        <Card.Group>
          <Card.Item title={"折叠面板"}>
            asdasda
          </Card.Item>
          <Card.Item title={"折叠面板"}>
            asdasda
          </Card.Item>
        </Card.Group>
      </div>
      <div style={{ padding: 10 }}>
        <Card.Group defaultActiveKey={1}>
          <Card.Item title={"手风琴面板"} eventKey={1}>
            asdasda
          </Card.Item>
          <Card.Item title={"手风琴面板"} eventKey={2}>
            asdasda
          </Card.Item>
        </Card.Group>
      </div>
    </div>
  }
}